<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>esd管理系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/backend/plugins/element-ui/index.css">
    <link rel="stylesheet" href="/backend/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/backend/styles/list.css">
    <style>
        .pagiantion {
            text-align: center;
        }
    </style>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>日志列表</h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计分析</el-breadcrumb-item>
            <el-breadcrumb-item>日志列表</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <el-row>
                <el-col :span="24">
                    <div class="filter-container">
                        终端ID：
                        <el-input placeholder="终端ID" v-model="pagination.stationId" style="width: 150px;"
                                  class="filter-item">
                        </el-input>
                        终端类型：
                        <el-select v-model="pagination.deviceTypeName" placeholder="请选择" style="width: 200px">
                            <el-option
                                    v-for="(item , index) in deviceTypes"
                                    :key="index"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                        生产线：
                        <el-select v-model="pagination.line" placeholder="请选择" style="width: 150px">
                            <el-option
                                    v-for="item in lines"
                                    :key="item.lineName"
                                    :label="item.lineName"
                                    :value="item.lineName">
                            </el-option>
                        </el-select>
                        通道类型：
                        <el-select v-model="pagination.channelName" placeholder="请选择" style="width: 150px">
                            <el-option
                                    v-for="(item , index) in channelTypes"
                                    :key="index"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                        状态：
                        <el-select v-model="pagination.status" placeholder="请选择" style="width: 100px">
                            <el-option
                                    v-for="item in statusList"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
            </el-row>
            <el-row style="margin-top: 0.8vh;">
                <el-col :span="24">
                    <div class="filter-container">
                        开始时间段:
                        <el-date-picker
                                v-model="pagination.timeScale"
                                type="datetimerange"
                                :picker-options="pickerOptions"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                align="right">
                        </el-date-picker>
                        <el-button type="primary" icon="el-icon-search" plain @click="findPage()" class="dalfBut">查询</el-button>
                        <el-button type="default" icon="el-icon-delete-solid" class="butT" @click="emptySearch()">清空查询条件</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-table
                    style="margin-top: 0.8vh;"
                    size="small"
                    current-row-key="esdLogId"
                    :data="dataList"
                    highlight-current-row>
                <el-table-column type="index" align="center" label="序号"></el-table-column>
                <el-table-column prop="deviceTypeName" label="终端类型" align="center"></el-table-column>
                <el-table-column prop="channelName" label="通道类型" align="center"></el-table-column>
                <el-table-column prop="stationId" label="终端ID和通道编号" align="center"></el-table-column>
                <el-table-column prop="lineAndPosition" label="终端所在位置" align="center"></el-table-column>
                <el-table-column prop="status" label="终端状态" align="center"></el-table-column>
                <el-table-column prop="statusDesc" label="终端状态描述" align="center"></el-table-column>
                <el-table-column prop="enable" label="是否启用" align="center">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.enabled"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                disabled
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
                <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
            </el-table>
            <div class="pagination-container" style="margin-top: 0.8vh;">
                <el-pagination
                        class="pagiantion"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pagination.pageSize"
                        :current-page.sync="pagination.currentPage"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="/backend/plugins/vue/vue.js"></script>
<script src="/backend/plugins/element-ui/index.js"></script>
<script type="text/javascript" src="/backend/plugins/jquery/jquery.min.js"></script>
<script src="/backend/plugins/axios/axios.min.js"></script>
<script src="/backend/js/request.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            dataList : [],
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 10,//每页显示的记录数
                total: 0,//总记录数
                stationId: null, //查询条件
                deviceTypeName: null,
                line: null,
                channelName: null ,
                status: null,
                timeScale: null,
            },
            deviceTypes: [],
            lines: [],
            channelTypes: [],
            statusList: ["正常" , "失联" , "异常", "待机"],
            timeScale: '',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            }
        },
        created() {
            axios.get("/deviceType/getDeviceTypes").then((res) => {
                this.deviceTypes = res.data;
            });
            axios.get("/line/listAll").then((res) => {
                this.lines = res.data.data;
            });
            axios.get("/channelType/getChannelTypes").then((res) => {
                this.channelTypes = res.data;
            });
            this.findPage() ;
        },
        methods: {
            formatDate(date) {
                let year = date.getFullYear();
                let month = ('0' + (date.getMonth() + 1)).slice(-2);
                let day = ('0' + date.getDate()).slice(-2);
                let hours = ('0' + date.getHours()).slice(-2);
                let minutes = ('0' + date.getMinutes()).slice(-2);
                let seconds = ('0' + date.getSeconds()).slice(-2);
                return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
            },
            findPage() {
                $axios({
                    url: '/esdLogAdmin/logSearch',
                    method: 'post',
                    data: this.pagination
                }).then((res) => {
                    this.pagination.total = res.data.total;
                    this.dataList = res.data.items;
                });
            },
            emptySearch(){
                this.pagination.stationId = null;
                this.pagination.deviceTypeName = null ;
                this.pagination.line = null ;
                this.pagination.channelName = null ;
                this.pagination.status = null ;
                this.pagination.currentPage = 1;
                this.pagination.pageSize = 10 ;
                this.pagination.timeScale = null ;
                this.findPage() ;
            },
            //切换页码
            handleCurrentChange(currentPage) {
                //设置最新的页码
                this.pagination.currentPage = currentPage;
                //重新调用findPage方法进行分页查询
                this.findPage();
            },
            handleSizeChange(pageSize) {
                this.pagination.pageSize = pageSize
                this.findPage()
            }
        }
    })
</script>
</html>